<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>账单查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>


    <!-- Animate -->
    <link th:href="@{/plugins/animate/animate.css}" rel="stylesheet"/>
    <!-- Jquery -->
    <script th:src="@{/plugins/jquery/jquery-2.1.1.js}"></script>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap/bootstrap.min.css}">
    <!-- Bootstrap -->
    <script th:src="@{/plugins/bootstrap/bootstrap.min.js}"></script>
    <!-- layer  -->
    <script th:src="@{/plugins/layer/layer.js}"></script>
    <!-- Data picker -->
    <script th:src="@{/plugins/datapicker/bootstrap-datepicker.js}"></script>
    <!--表格-->
    <script th:src="@{/plugins/footable/footable.all.min.js}"></script>
    <!-- FooTable -->
    <link th:href="@{/plugins/footable/footable.core.css}" rel="stylesheet">
    <link th:href="@{/plugins/datapicker/datepicker3.css}" rel="stylesheet">

    <link th:href="@{/module/index/style.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/font-awesome.css}"> <!--图标-->
    <!-- index -->
    <link th:href="@{/module/index/index.min.css}" rel="stylesheet"/>
</head>

<body style="background-color: #f5f5f5">
<div class="padding-md">
    <ul class="breadcrumb">
        <li><span class="primary-font"><i class="icon-home"></i></span><a href="#"> 账单</a></li>
        <li id="navLi2">账单明细</li>
    </ul>
    <div class="wrapper wrapper-content animated fadeInRight ecommerce" style="padding: 0px;width: 100%">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label" for="start_time">开始时间</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input
                                id="start_time" type="text" th:value="${param.startTime}" class="form-control" placeholder="请选择开始时间">
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label" for="end_time">结束时间</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input
                                id="end_time" type="text" th:value="${param.endTime}" class="form-control" placeholder="请选择结束时间">
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label" for="tag">标签</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input
                                id="tag" type="text" class="form-control" placeholder="标签">
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <button type="button" onclick="query()" class="btn btn-block btn-outline btn-primary"
                        style="color:#1ab394;background-color:transparent;border-color:#1ab394;">查询
                </button>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">

                        <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="10">
                            <thead>
                            <tr>
                                <th data-sort-ignore="true">ID</th>
                                <th>时间</th>
                                <th>支出金额</th>
                                <th>收入金额</th>
                                <th>最大单笔支出</th>
                                <th data-sort-ignore="true">最大单笔支出说明</th>
                                <th data-hide="tablet">最大单笔收入</th>
                                <th data-hide="tablet" data-sort-ignore="true">最大单笔收入说明</th>
                                <th>状态</th>
                                <th data-sort-ignore="true">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:if="bills != null" th:each="bill, index :${bills}">
                                <td th:text="${bill.id}"></td>
                                <td th:text="${bill.date}"></td>
                                <td th:text="'￥'+${bill.paid == null ? 0 : bill.paid}"></td>
                                <td th:text="'￥'+${bill.income == null ? 0 : bill.income}"></td>
                                <td th:text="'￥'+${bill.maxPaid == null ? 0 : bill.maxPaid}"></td>
                                <td th:text="${bill.maxPaidExplain}"></td>
                                <td th:text="'￥'+${bill.maxIncome  == null ? 0 : bill.maxIncome }"></td>
                                <td th:text="${bill.maxIncomeExplain}"></td>
                                <td>
                                    <span th:if="${bill.status == 1}" class="label label-success">正常</span>
                                    <span th:if="${bill.status == 2}" class="label label-danger">警告</span>
                                    <span th:if="${bill.status == 3}" class="label label-warning">异常</span>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="btn-white btn btn-xs" th:onclick="'javascript:gotoBillDetail(\''+ ${bill.date} +'\')'">详情</button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="12">
                                    <ul class="pagination pull-right"></ul>
                                </td>
                            </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        $('.footable').footable();
        $('#start_time').datepicker({
            language: "cn",
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: "yyyy-mm-dd"
        });

        $('#end_time').datepicker({
            language: "cn",
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: "yyyy-mm-dd"
        });

    });
    function gotoBillDetail(date){
        window.location.href = "/detail/index/1?date=" + date;
    }
    function query() {
        var st = $("#start_time").val();
        var et = $("#end_time").val();
        window.location.href = "/bill/index?startTime=" + st + "&endTime=" + et;
    }

    /*]]>*/
</script>
</body>
</html>
